<template>
  <div class="welcome_block">
    <!--<img :src="welcomeBg" class="welcome_bg">-->
    <div class="welcome_content">
      <div class="welcome_head">
        <div class="welcome_head_left">
          <span class="middle_words"></span>
          <span class="last_words">{{ $t('project.TITLE') }}</span>
        </div>
        <div class="welcome_head_right">
          <!--<router-link to="/race-manage">-->
            <span @click="startUse">{{ $t('welcome.WORKSPACE') }}</span>
          <!--</router-link>-->
          <router-link to="">
            <span class="about_us">{{ $t('welcome.ABOUTUS') }}</span>
          </router-link>
        </div>
      </div>
      <div class="animation_1">
        <span class="content1">{{ $t('welcome.CONTENT1') }}</span>
      </div>
      <div class="animation_2">
        <span class="content2">{{ $t('welcome.CONTENT2') }}</span>
      </div>
      <button class="btn_start" @click="startUse">{{ $t('welcome.STARTUSE') }}</button>
    </div>

  </div>
</template>

<script>
import welcomeLogo from '@/assets/images/welcome_logo.png'
import welcomeBg from '@/assets/images/welcome_bg.png'

export default {
  name: 'HeaderBar',
  data () {
    return {
      welcomeLogo: welcomeLogo,
      welcomeBg: welcomeBg
    }
  },
  methods: {
    startUse () {
      this.$router.push('/race-manage')
      localStorage.setItem('active', 5)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
  @keyframes moveOne {
    from {
      top: 45%;
      opacity: 0;
    }
    to {
      top: 35%;
      opacity: 1;
    }
  }

  @keyframes moveTwo {
    from {
      top: 55%;
      opacity: 0;
    }
    to {
      top: 45%;
      opacity: 1;
    }
  }

  @keyframes moveBtn {
    from {
      top: 60%;
      opacity: 0;
    }
    to {
      top: 55%;
      opacity: 1;
    }
  }

  .welcome_block {
    height: 100%;
  }

  .welcome_head {
    width: 100%;
    height: 123px;
    line-height: 123px;
  }

  .welcome_content {
    position: relative;
    z-index: 12;
    width: 100%;
    height: 100%;
  }

  .welcome_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .welcome_head_left {
    float: left;
  }

  .welcome_head_right {
    float: right;
  }

  .welcome_head_right span {
    font-size: 14px;
    color: #5399E1;
  }

  .animation_1 {
    position: absolute;
    left: 17.2%;
    animation: moveOne 2s both linear;
    -webkit-animation: moveOne 2s both linear;
  }

  .animation_2 {
    position: absolute;
    left: 23%;
    animation: moveTwo 2s 1s both linear;
    -webkit-animation: moveTwo 2s 1s both linear;
  }

  .btn_start {
    width: 380px;
    height: 50px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 1);
    border: 1px solid #5399E1;
    font-size: 25px;
    outline: none;
    background: none;
    color: #5399E1;
    position: absolute;
    left: 23%;
    animation: moveBtn 2s 2s both linear;
    -webkit-animation: moveBtn 2s 2s both linear;
    font-weight: lighter;
    cursor: pointer;
  }

  .btn_start:hover {
    /*background: #5399E1;*/
    /*border-color: #5399E1;*/
    /*color: #fff;*/
  }

  .middle_words {
    font-size: 25px;
    color: #5399E1;
    margin-right: 40px;
  }

  .last_words {
    font-size: 29px;
    color: #5399E1;
  }

  .about_us {
    margin: 0 50px 0 20px;
  }

  .content1 {
    color: #5399E1;
    font-size: 50px;
  }

  .content2 {
    color: #5399E1;
    font-size: 43px;
  }

</style>
